<template>
    <div style="width:100%;height:100%" >
        <div ref="wuhanChart" style="width:100%;height:90%"></div>
        <div style="width:100%;height:10%">
        <span style="color:red;font-size:20px">武汉加油!</span>
        <br>
        <span>数据由个人从湖北省卫生健康委员会官网整理得出，仅供参考，网站地址：</span><a href="http://wjw.hubei.gov.cn/">http://wjw.hubei.gov.cn/</a>
        </div>
    </div>
</template>
<script>
import echarts  from 'echarts'
import {wuHanList} from '../../utils/api'
export default {
    data(){
        return{
            apiBaseUrl: process.env.VUE_APP_API_BASE,
            options: {
                dataset:{
                    source:[
                        ['日期', '确诊新增', '确诊总数', '死亡新增', '死亡总数', '出院新增', '出院总数'],
                        ['1月20日', '60', '258', '2', '6', '0', '25'],
                        ['1月21日', '105', '363', '3', '9', '3', '28'],
                        ['1月22日', '62', '425', '8', '17', '0', '28'],
                        ['1月23日', '70', '495', '6', '23', '3', '31'],
                        ['1月24日', '77', '572', '15', '38', '1', '32'],
                        ['1月25日', '46', '618', '7', '45', '8', '40'],
                        ['1月26日', '80', '698', '18', '63', '2', '42']
                    ]
                },
                legend:{
                    itemWidth: 30,// 标志图形的长度
                    itemHeight: 30,// 标志图形的宽度
                    data: ['日期', '确诊新增', '确诊总数', '死亡新增', '死亡总数', '湖北出院新增', '湖北出院总数']
                },
                title: {
                    text: '武汉市新型冠状病毒感染疫情数据'
                },
                tooltip: {},
                xAxis: {
                        type: 'category'
                
                },
                yAxis: {},
                series: [
                    {type: 'bar',name:'确诊新增', encode: {x: 0, y: 1}},
                    {type: 'line',name:'确诊总数',encode: {x: 0, y: 2}},
                    {type: 'bar',name:'死亡新增', encode: {x: 0, y: 3}},
                    {type: 'line',name:'死亡总数',encode: {x: 0, y: 4}},
                    {type: 'bar', name:'湖北出院新增',encode: {x: 0, y: 5}},
                    {type: 'line',name:'湖北出院总数',encode: {x: 0, y: 6}}
                    ]
            }
        }
    },
    methods: {
        getWuHanList(type){
            let query = {
                type: type
            };
            wuHanList(this.apiBaseUrl,query).then(response =>{
                window.console.log(response);
                if (response.code !== 0) {
                        return false;
                    }
                let data = response.data;
                if (data.length <= 0) {
                    return false;
                }
                window.console.log(data);
                this.options.dataset.source = data;
                var mychart = echarts.init(this.$refs.wuhanChart);
                window.console.log(this.options.dataset.source);
                mychart.setOption(this.options);
            }).catch(() =>{
                window.console.log("请求武汉数据失败");
            })
        }
    },
    mounted(){
        this.getWuHanList("1");
    }
}
</script>